<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{(action == 'Add'?'添加':'修改')}}出库信息</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form" :data-options="JSON.stringify({'tableName':'sales_receipt','formName':'dataForm' ,'primaryKey':'Sales_Receipt_SerialNumber'})">
                    <!-- 子表 -->
                    <div :data-options="JSON.stringify({'tableName':'sales_receipt_detail','formName':'childDataForm', 'parentTableName':'sales_receipt'})"></div>
                </div>
                <div class="table_titel">
                    <div class="titel">出库信息</div>
                </div>
                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">出库日期</div>
                            </template>
                            <el-form-item prop="Receipt_Date" :rules="[{ required: true, message: '请选择出库日期', trigger: 'change' }]">
                                <el-date-picker v-model="dataForm.Receipt_Date" type="date" placeholder="选择日期" style="width: 100%;"
                                    value-format="yyyy-MM-dd" />
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">出库类型</div>
                            </template>
                            <el-form-item prop="Receipt_Type" :rules="[{ required: true, message: '请选择出库类型', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Receipt_Type" placeholder="请选择出库类型" filterable style="width: 100%" clearable>
                                    <el-option label="大宗商品" value="0"></el-option>
                                    <el-option label="零售商品" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">仓库编号</div>
                            </template>
                            <el-form-item prop="Store_SerialNumber" :rules="[{ required: true, message: '请选择仓库', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Store_SerialNumber" placeholder="请选择仓库" filterable style="width: 100%" clearable>
                                    <el-option v-for="(storeItem, storeIndex) in storeList" :key="storeIndex" 
                                        :label="storeItem.Store_Name || storeItem.Store_SerialNumber" 
                                        :value="storeItem.Store_SerialNumber"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">企业信息序列号</div>
                            </template>
                            <el-form-item prop="Enterprise_Info_SerialNumber" :rules="[{ required: true, message: '请选择企业', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Enterprise_Info_SerialNumber" placeholder="请选择企业" filterable style="width: 100%" clearable>
                                    <el-option v-for="(enterpriseItem, enterpriseIndex) in enterpriseList" :key="enterpriseIndex" 
                                        :label="enterpriseItem.Enterprise_Name || enterpriseItem.Enterprise_Info_SerialNumber" 
                                        :value="enterpriseItem.Enterprise_Info_SerialNumber"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>

                    </el-descriptions>
                </el-form>

                <div class="table_titel">
                    <div class="titel">出库子信息</div>
                    <div class="operation">
                        <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
                        <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
                    </div>
                </div>

                <el-form :model="{childDataForm:childDataForm.filter(i=>!i.Row_Status || i.Row_Status != '1')}" ref="childForm" 
                    :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border 
                        v-for="(item,index) in childDataForm.filter(i=>!i.Row_Status || i.Row_Status != '1')" :key="index">
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">订单类型</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Order_Type`" :rules="[{ required: true, message: '请输入订单类型', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Order_Type" placeholder="请输入订单类型" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">订单编号</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Sales_Order_SerialNumber`"
                                :rules="[{ required: true, message: '请输入订单编号', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Sales_Order_SerialNumber" placeholder="请输入订单编号" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">商品编号</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Article_SerialNumber`"
                                :rules="[{ required: true, message: '请输入商品编号', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Article_SerialNumber" placeholder="请输入商品编号" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">出库数量</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Receipt_Quantity`"
                                :rules="[{ required: true, message: '请输入出库数量', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Receipt_Quantity" placeholder="请输入出库数量" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">价格</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Amount`"
                                :rules="[{ required: true, message: '请输入价格', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Amount" placeholder="请输入价格" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                    <div v-if="childDataForm.filter(i=>!i.Row_Status || i.Row_Status != '1').length === 0" style="padding: 20px; text-align: center; color: #999;">
                        暂无出库明细信息，请点击上方"新增"按钮添加
                    </div>
                </el-form>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button size="medium" type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>